<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图书小站</title>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <!-- 顶部导航 start -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button
                        type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false"
                    >
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">图书小站</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div
                    class="collapse navbar-collapse"
                    id="bs-example-navbar-collapse-1"
                >
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input
                                type="text"
                                class="form-control searchInput"
                                placeholder="关键字"
                                
                            />
                        </div>
                        <button type="button" class="searchBtn btn btn-default">
                            搜索
                        </button>
                    </form>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- 顶部导航 end -->

        <!-- 主体内容 start -->
        <div class="container">
            <!-- 巨幕 start -->
            <div class="jumbotron text-center">
                <h2>书山有路勤为径, 学海无涯苦作舟</h2>
            </div>
            <!-- 巨幕 end -->

            <!-- 图书 start -->
            <div class="row bookList">
                
            </div>
            <!-- 图书 end -->

            <!-- 分页 start -->
            <nav aria-label="Page navigation">
                <ul class="pagination pull-right">
                    
                </ul>
            </nav>
            <!-- 分页 end -->
        </div>
        <!-- 主体内容 end -->
    </body>
</html>
